<template>
	<view>
		<view class="u-skeleton">
			<view>
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
					<view class="lawyer-con">
						<view class="lawyer-item" v-for="(item, index) in 5" :key="index" @click="navTo(item)">
							<view class="avatar">
								<image class="img u-skeleton-circle" :style="{opacity: current===1 ? 0.5 : 1}" src="https://oss.arapp.net/img/avatar.png" mode=""></image>
								<view class="online u-skeleton-fillet">
									<view class="iconfont iconduihao"></view>
									<view class="text">在线</view>
								</view>
								<!-- <view class="offline u-skeleton-fillet">
									<view class="circel"></view>
									<view class="text">离线</view>
								</view> -->
							</view>
							<view class="lawyer-info">
								<view class="name u-skeleton-fillet">薛正义</view>
								<view class="tag">
									<u-tag class="bb u-skeleton-fillet" text="狼狈为奸" mode="plain" size="mini" color="#d9b975" border-color="#d9b975" v-for="(item, index) in 4" :key="index" />
								</view>
								<view class="introduce u-skeleton-fillet">华东政法大学国际经济法专业本科毕业，后取得英国曼彻斯特大学国际商法学硕士学位，08年进入律师事务所。</view>
								<view class="price u-skeleton-fillet">
									<text>¥50</text>
									<text>起可咨询</text>
									<text>平均回复：1小时内</text>
									<text class="remove" @click.stop="remove(item)">移除</text>
								</view>
							</view>
						</view>
					</view>
				</mescroll-body>
			</view>
			
		</view>
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				loading: true, // 是否显示骨架屏组件
				mescroll: null,
				btns: [
					{
						id: 1,
						val: '婚姻家事'
					},
					{
						id: 2,
						val: '房产纠纷'
					},
					{
						id: 3,
						val: '公司工商'
					},
					{
						id: 4,
						val: '交通事故'
					},
					{
						id: 5,
						val: '合同纠纷'
					},
					{
						id: 6,
						val: '债权纠纷'
					},
					{
						id: 7,
						val: '劳动用工'
					},
					{
						id: 8,
						val: '刑事辩护'
					},
					{
						id: 9,
						val: '行政复议'
					},
					{
						id: 10,
						val: '行政诉讼'
					}
				],
				current: -1,
				upOption: {
					use: true,
					auto: false,
					page: {
					  num: 1,
					  size: 10 // 每页数据的数量,默认10
					},
					empty: {
					  use: false
					},
					toTop: {
					  src: ''
					},
					onScroll: false,
					textNoMore: '',
					textNoMore: ''
				},
				downOption: {
					use: true,
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					onScroll: false,
					// bgColor: "#112a49", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					page: {
					    num: 1,
					    size: 10 // 每页数据的数量,默认10
					}
				},
			}
		},
		onLoad() {
			setTimeout(() => {
				this.loading = false
			}, 1000)
		},
		methods: {
			navTo(item) {
				uni.navigateTo({url: '/pages/lawyer/lawyer-detail'})
			},
			handleBtnClick(index) {
				if (this.current === index) return
				console.log(index)
				this.current = index
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			downCallback(page) {
				setTimeout(() => {
					this.mescroll.endSuccess(10, true)
				}, 2000)
				console.log('下拉刷新')
				console.log(page)
				// console.log(this.downOption.page)
			},
			upCallback(page) {
				console.log('加载更多')
				console.log(page)
				setTimeout(() => {
					this.mescroll.endSuccess(10, true)
				}, 2000)
				// this.messageList = this.messageList.concat(data)
				// this.mescroll && this.mescroll.endSuccess(data.length)
			},
			remove(data) {
				console.log(data)
				this.$u.toast('移除成功')
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #f6f7f9;
	}
	.lawyer-con {
		padding: 0 30rpx;
		.lawyer-item {
			display: flex;
			border-bottom: 1px solid #ecedf5;
			padding: 30rpx 0;
			&:last-child {
				border-bottom: none;
			}
			.avatar {
				display: flex;
				flex-direction: column;
				align-items: center;
				.img {
					width: 90rpx;
					height: 90rpx;
					background-color: #f6f7f9;
					border-radius: 50%;
				}
				.online {
					display: flex;
					align-items: center;
					margin-top: 16rpx;
					.text {
						color: #5b5e67;
						font-size: 20rpx;
						padding-left: 4rpx;
					}
					.iconduihao {
						font-size: 20rpx;
						color: #12b234;
					}
				}
				.offline {
					display: flex;
					align-items: center;
					margin-top: 16rpx;
					.text {
						color: #5b5e67;
						font-size: 20rpx;
						padding-left: 4rpx;
					}
					.circel {
						width: 19rpx;
						height: 19rpx;
						background-color: #b8b9bc;
						border-radius: 50%;
					}
				}
			}
			.lawyer-info {
				margin-left: 15rpx;
				.name {
					font-size: 32rpx;
				}
				.tag {
					margin: 4rpx 0 16rpx 0;
					.bb {
						margin-right: 10rpx;
					}
				}
				.introduce {
					font-size: 24rpx;
					color: #5b5e67;
					margin-bottom: 30rpx;
				}
				.price {
					display: flex;
					font-size: 28rpx;
					color: #363c49;
					font-weight: 800;
					text:nth-child(1) {
						font-weight: normal;
						color: #eb6657;
						font-size: 28rpx;
					}
					text:nth-child(2) {
						padding: 0 40rpx 0 10rpx;
					}
					.remove {
						display: flex;
						height: 50rpx;
						border-radius: 8rpx;
						border: solid 1rpx #eb6657;
						font-size: 24rpx;
						color: #eb6657;
						line-height: 50rpx;
						padding: 0 30rpx;
						margin-left: auto;
						&:active {
							opacity: 0.9;
							background-color: #eb6657;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
